<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>保单信息-申请</title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/previewImage.css" rel="stylesheet"/>
    <link href="css/common.css" rel="stylesheet"/>
    <script src="js/mui.js"></script>
    <script src="js/mui.zoom.js"></script>
    <script src="js/mui.previewimage.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/wxOpen.js"></script>
    <script src="js/html5ImgCompress/dist/html5ImgCompress.min.js"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        .mui-input-group {
            margin-top: 10px;
        }

        .upload-btn{
            position: relative;
        }
        #multiple{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 10;
        }
        #imgList:before,#imgList:after,#lineForm:before,#lineForm:after{
            height: 0;
        }
        #lineForm .mui-input-row{
            height: auto;
        }
        .line{
            height: 10px;
            background: #efeff4;
        }

        .update{
            font-style: normal;
            color: #999999;
            margin-right: -25px;
            font-size: 15px;
        }
        .field-invalidmsg{
            padding:10px 15px;            
            color:#a94442;
        }
        .tb{
            display: none;
        }
        /*#tbprojectpop select{
            -webkit-appearance:menulist;
        }*/

        .popup{
            display: none;
            width: 100%;
            height:100vh;
            position: fixed;
            z-index: 998;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.6);
        }
        .popupContainer {
            background-color: #fff;
            position: absolute;
            bottom: 0;
            width: 100%;
            overflow: hidden;
            z-index: -2;
        }
        .popList {
            height:100vh;
        }
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
    <h1 class="mui-title">保单信息-申请</h1>
</header>
<div class="mui-content">
    <div class="mui-content-padded">
        <p>便捷的申请流程，您只需填写被保险人基本信息、选择保险项目和保险公司就OK啦！</p>
    </div>
    <div> <!-- class="mui-scroll" -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                被保险人信息
            </li>
            <li class="mui-table-view-cell">
                <div id="segmentedControl" class="mui-segmented-control">
                    <a class="mui-control-item mui-active" href="#item1" value="GR">个人</a>
                    <a class="mui-control-item" href="#item2" value="QY">企业</a>
                </div>
                <div class="mui-input-group" id="lineForm">
                    <div class="mui-input-row" style="margin-top: 10px;">
                        <label>承保城市</label>
                        <select class="mui-input-clear mui-input" id="contractCity">
                            <option value="上海">上海</option>
                            <option value="宁波">宁波</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>

                    <div id="item1" class="mui-control-content mui-active">
                        <div class="mui-input-row">
                            <label>车主姓名</label>
                            <input type="text" class="mui-input-clear mui-input" placeholder="请输入车主姓名" id="username" value="">
                        </div>
                        <div id="username-description"></div>
                        <div class="mui-input-row">
                            <label>身份证号</label>
                            <input type="text" class="mui-input-clear mui-input" placeholder="请输入车主身份证号" id="idCard" value="">
                        </div>
                        <div id="idCard-description"></div>
                    </div>
                    <div id="item2" class="mui-control-content">
                        <div class="mui-input-row">
                            <label>企业名称</label>
                            <input type="text" class="mui-input-clear mui-input" placeholder="请输入企业名称" id="companyname">
                        </div>
                        <div id="companyname-description"></div>
                        <div class="mui-input-row">
                            <label>营业证号</label>
                            <input type="text" class="mui-input-clear mui-input" placeholder="请输入营业证登记号" id="businesscard">
                        </div>
                        <div id="businesscard-description"></div>
                    </div>

                    <div class="mui-input-row">
                        <label>手机号</label>
                        <input type="text" class="mui-input-clear mui-input" placeholder="请输入车主手机号" id="phoneNo" value="">
                    </div>
                    <div id="phoneNo-description"></div>
                    <div class="mui-input-row">
                        <label>邮寄地址</label>
                        <input type="text" class="mui-input-clear mui-input" placeholder="请输入保单邮寄地址" id="address" value="">
                    </div>
                    <div id="address-description"></div>

                    <div class="mui-input-row">
                        <label>是否新车</label>
                        <!-- 0-是，1-否 -->
                        <div class="mui-switch mui-switch-blue mui-switch-mini" style="float:left;" id="ifNewCar">
                            <div class="mui-switch-handle"></div>
                        </div>
                    </div>
                    <div class="mui-input-row" id="notNewCar">
                        <label>车牌号码</label>
                        <input type="text" style="width:45%" class="mui-input-clear mui-input" placeholder="请输入车牌号码" id="carnumber" value="">
                        <select class="mui-input-clear mui-input" style="width:20%">
                            <option value="沪">沪</option>
                            <option value="苏">苏</option>
                            <option value="黑">黑</option>
                            <option value="辽">辽</option>
                            <option value="浙">浙</option>
                            <option value="赣">赣</option>
                            <option value="湘">湘</option>
                            <option value="晋">晋</option>
                            <option value="豫">豫</option>
                            <option value="云">云</option>
                            <option value="冀">冀</option>
                            <option value="皖">皖</option>
                            <option value="鲁">鲁</option>
                            <option value="新">新</option>
                            <option value="鄂">鄂</option>
                            <option value="桂">桂</option>
                            <option value="甘">甘</option>
                            <option value="蒙">蒙</option>
                            <option value="陕">陕</option>
                            <option value="吉">吉</option>
                            <option value="闽">闽</option>
                            <option value="贵">贵</option>
                            <option value="粤">粤</option>
                            <option value="川">川</option>
                            <option value="青">青</option>
                            <option value="藏">藏</option>
                            <option value="琼">琼</option>
                            <option value="宁">宁</option>
                            <option value="渝">渝</option>
                            <option value="京">京</option>
                            <option value="津">津</option>
                        </select>
                    </div>
                    <div id="carnumber-description"></div>
                </div>                
            </li>
            <li class="mui-table-view-cell">
                <div class="mui-table">
                    <div class="mui-table-cell mui-col-xs-10">
                        <p class="mui-h6 mui-ellipsis" id="tip">请上传身份证正反面和机动车行驶证</p>
                    </div>
                    <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                        <div class="mui-btn mui-btn-primary upload-btn" style="font-size: 12px;padding: 3px 10px;">
                            上传
                            <input type="file" accept="image/*" name="" value="" multiple id="multiple" />
                        </div>
                    </div>
                </div>
            </li>
            <li class="mui-table-view-cell">
                <ul class="mui-table-view mui-grid-view" style="border: 0px;" id="imgList">
                </ul>
            </li>
        </ul>

        <div class="line"></div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-input-row mui-navigate-right" onclick='blockScroll("#tbprojectpop","#tc-wrapper","#closeReply",0);'>
                    <label>投保项目</label><label class="update" style="width: 65%; white-space: initial;" id="tbproject">请选择投保项目</label>
                </a>
            </li>
        </ul>



        <div class="line"></div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a class="mui-input-row mui-navigate-right" onclick='blockScroll("#tbcompanypop","#tc-wrapper1","#closeReply1",1);'>
                    <label>投保公司</label><label class="update" style="width: 65%; white-space: initial;" id="tbcompany" num="0" code="">请选择投保公司</label>
                </a>
            </li>
        </ul>


        <div>
            <div class="mui-content-padded">
                <button type="button" class="mui-btn mui-btn-primary mui-btn-block" data-loading-icon="mui-spinner mui-spinner-white" data-loading-text="提交中..." id="ipApplyBtn" num="0">提交</button>
            </div>
        </div>
    </div>
</div>


<!-- 投保项目 begin -->
<div class="popup" id="tbprojectpop">
    <div class="popupContainer">
        <div class="popList" id="tc-wrapper">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    基本险
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row mui-checkbox mui-left" style="border: 0px;">
                        <div class="mui-col-xs-12">
                            <label>交强险/车船税</label>
                            <input name="projectcb" value="交强险/车船税" code="PRODUCT_JQXCHS" type="checkbox" >
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    商业险
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-5 mui-checkbox mui-left">
                            <label>车辆损失险</label>
                            <input name="projectcb" value="车辆损失险" code="PRODUCT_CLSUX" type="checkbox" >
                        </div>
                        <div class="mui-col-xs-5 mui-checkbox mui-left mui-disabled">
                            <label>不计免赔</label>
                            <input name="notcb" value="" type="checkbox" checked="checked" disabled="disabled">
                        </div>
                        <div class="mui-col-xs-2" style="padding-top:6px;">
                            <span class="mui-badge mui-badge-primary tb">投保</span>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-5 mui-checkbox mui-left">
                            <label>第三者责任险</label>
                            <input name="projectcb" value="第三者责任险" code="PRODUCT_DSZZRX" type="checkbox" >
                        </div>
                        <div class="mui-col-xs-5 mui-checkbox mui-left mui-disabled">
                            <label>不计免赔</label>
                            <input name="notcb" value="" type="checkbox" checked="checked" disabled="disabled">
                        </div>
                        <div class="mui-col-xs-2">
                            <select class="mui-input-clear mui-input" style="margin-bottom: 0;">
                                <option value="50000" selected="">5万</option>
                                <option value="100000">10万</option>
                                <option value="200000">20万</option>
                                <option value="300000">30万</option>
                                <option value="500000">50万</option>
                                <option value="1000000">100万</option>
                                <option value="1500000">150万</option>
                                <option value="2000000">200万</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-5 mui-checkbox mui-left">
                            <label>司机责任险</label>
                            <input name="projectcb" value="司机责任险" code="PRODUCT_SJZRX" type="checkbox" >
                        </div>
                        <div class="mui-col-xs-5 mui-checkbox mui-left mui-disabled">
                            <label>不计免赔</label>
                            <input name="notcb" value="" type="checkbox" checked="checked" disabled="disabled">
                        </div>
                        <div class="mui-col-xs-2">
                            <select class="mui-input-clear mui-input" style="margin-bottom: 0;">
                                <option value="10000" selected="">1万</option>
                                <option value="20000">2万</option>
                                <option value="30000">3万</option>
                                <option value="40000">4万</option>
                                <option value="50000">5万</option>
                                <option value="100000">10万</option>
                                <option value="200000">20万</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-5 mui-checkbox mui-left">
                            <label>乘客责任险</label>
                            <input name="projectcb" value="乘客责任险" code="PRODUCT_CKZRX" type="checkbox" >
                        </div>
                        <div class="mui-col-xs-5 mui-checkbox mui-left mui-disabled">
                            <label>不计免赔</label>
                            <input name="notcb" value="" type="checkbox" checked="checked" disabled="disabled">
                        </div>
                        <div class="mui-col-xs-2">
                            <select class="mui-input-clear mui-input" style="margin-bottom: 0;">
                                <option value="10000" selected="">1万/座</option>
                                <option value="20000">2万/座</option>
                                <option value="30000">3万/座</option>
                                <option value="40000">4万/座</option>
                                <option value="50000">5万/座</option>
                                <option value="100000">10万/座</option>
                                <option value="200000">20万/座</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-5 mui-checkbox mui-left">
                            <label>全车盗抢险</label>
                            <input name="projectcb" value="全车盗抢险" code="PRODUCT_DQX" type="checkbox" >
                        </div>
                        <div class="mui-col-xs-5 mui-checkbox mui-left mui-disabled">
                            <label>不计免赔</label>
                            <input name="notcb" value="" type="checkbox" checked="checked" disabled="disabled">
                        </div>
                        <div class="mui-col-xs-2" style="padding-top:6px;">
                            <span class="mui-badge mui-badge-primary tb">投保</span>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-5 mui-checkbox mui-left">
                            <label>自燃损失险</label>
                            <input name="projectcb" value="自燃损失险" code="PRODUCT_ZRSSX" type="checkbox" >
                        </div>
                        <div class="mui-col-xs-5 mui-checkbox mui-left mui-disabled">
                            <label>不计免赔</label>
                            <input name="notcb" value="" type="checkbox" checked="checked" disabled="disabled">
                        </div>
                        <div class="mui-col-xs-2" style="padding-top:6px;">
                            <span class="mui-badge mui-badge-primary tb">投保</span>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-5 mui-checkbox mui-left">
                            <label>车身划痕险</label>
                            <input name="projectcb" value="车身划痕险" code="PRODUCT_CSHHX" type="checkbox" >
                        </div>
                        <div class="mui-col-xs-5 mui-checkbox mui-left mui-disabled">
                            <label>不计免赔</label>
                            <input name="notcb" value="" type="checkbox" checked="checked" disabled="disabled">
                        </div>
                        <div class="mui-col-xs-2">
                            <select class="mui-input-clear mui-input" style="margin-bottom: 0;">
                                <option value="2000" selected="">2000</option>
                                <option value="5000">5000</option>
                                <option value="10000">10000</option>
                                <option value="20000">20000</option>
                            </select>
                        </div>
                    </div>
                </li>

                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-5 mui-checkbox mui-left">
                            <label>涉水险</label>
                            <input name="projectcb" value="涉水险" code="PRODUCT_SSX" type="checkbox" >
                        </div>
                        <div class="mui-col-xs-5 mui-checkbox mui-left mui-disabled">
                            <label>不计免赔</label>
                            <input name="notcb" value="" type="checkbox" checked="checked" disabled="disabled">
                        </div>
                        <div class="mui-col-xs-2" style="padding-top:6px;">
                            <span class="mui-badge mui-badge-primary tb">投保</span>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-10 mui-checkbox mui-left">
                            <label>玻璃破碎险</label>
                            <input name="projectcb" value="玻璃破碎险" code="PRODUCT_BLPSX" type="checkbox" >
                        </div>
                        <div></div>
                        <div class="mui-col-xs-2">
                            <select class="mui-input-clear mui-input" style="margin-bottom: 0;">
                                <option value="0" selected="">国产</option>
                            </select>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-10 mui-checkbox mui-left">
                            <label>车损无法找到第三方</label>
                            <input name="projectcb" value="车损无法找到第三方" code="PRODUCT_ZBDDSF" type="checkbox" >
                        </div>
                        <div class="mui-col-xs-2" style="padding-top:6px;">
                            <span class="mui-badge mui-badge-primary tb">投保</span>
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-row mui-input-row" style="border: 0px;">
                        <div class="mui-col-xs-12 mui-checkbox mui-left">
                            <label>指定专修厂</label>
                            <input name="projectcb" value="指定专修厂" code="PRODUCT_ZDZXC" type="checkbox" >
                        </div>
                    </div>
                </li>

                <div class="mui-content-padded">
                    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="closeReply">下一步</button>
                    <div style="height: 1px;"></div>
                </div>
            </ul>
        </div>
    </div>
</div>
<!-- 投保项目 end -->

<!-- 投保公司 begin -->
<div class="popup" id="tbcompanypop">
    <div class="popupContainer">
        <div class="popList" id="tc-wrapper1">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <div class="mui-input-row mui-radio mui-left" style="border: 0px;">
                        <label><img src="images/icon_TABX.png" height="20"/> 天安保险</label>
                        <input name="companycb" value="天安保险" code="TABX" type="radio">
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-input-row mui-radio mui-left" style="border: 0px;">
                        <label><img src="images/icon_TPBX.png" height="20"/> 太平保险</label>
                        <input name="companycb" value="太平保险" code="TPBX" type="radio">
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-input-row mui-radio mui-left" style="border: 0px;">
                        <label><img src="images/icon_ZGRB.png" height="20"/> 中国人保</label>
                        <input name="companycb" value="中国人保" code="ZGRB" type="radio">
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-input-row mui-radio mui-left" style="border: 0px;">
                        <label><img src="images/icon_ZGRS.png" height="20"/> 中国人寿</label>
                        <input name="companycb" value="中国人寿" code="ZGRS" type="radio">
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-input-row mui-radio mui-left" style="border: 0px;">
                        <label><img src="images/icon_ZGPA.png" height="20"/> 中国平安</label>
                        <input name="companycb" value="中国平安" code="ZGPA" type="radio">
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-input-row mui-radio mui-left" style="border: 0px;">
                        <label>系统推荐</label>
                        <input name="companycb" value="系统推荐" code="XTTJ"type="radio">
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-input-row">
                        <label>其他投保公司</label>
                        <input id="otherCompany" type="text" class="mui-input-clear mui-input" placeholder="选择其他公司时上述公司无效">
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-input-row">
                        <label>保单备注</label>
                        <input id="note" type="text" class="mui-input-clear mui-input" placeholder="请输入保单备注">
                    </div>
                </li>
                <div class="mui-content-padded">
                    <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="closeReply1">下一步</button>
                    <div style="height: 1px;"></div>
                </div>
            </ul>
        </div>
    </div>
</div>
<!-- 投保公司 end -->

<footer></footer>
<script src="js/common.js"></script>
<script src="js/pageJS/ip_apply.js"></script>
</body>
</html>